import React, { ReactNode, useContext } from 'react';
import './index.less'
import { ConfigContext } from '../../configProvider';
import cn from 'classnames'
interface Props {
    type?: 'default' | 'highlight',
    disabled?: boolean,
    icon?: ReactNode,
    text?: string,
    children?: ReactNode,
    classname?: string,
    style?: object,
    onClick?: React.MouseEventHandler<HTMLDivElement>
}

export default (props: Props) => {
    const { type, disabled, icon, text, children, classname, style, onClick } = props
    const { prefix } = useContext(ConfigContext)
    const pf = prefix + '-btn'
    const classes = cn(pf, {
        [`${pf}-highlight`]: type === 'highlight',
        [`${pf}-disabled`]: disabled,

    }, classname)
    return (
        <div className={classes}
            style={style}
            onClick={disabled ? undefined : onClick}
        >
            {icon}{text}{children}
        </div >
    )
};
